<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function addCs(){
            // 创建新的元素
            var csli = document.createElement("li") // <li></li>
            // 设置子元素的属性和文本 <li id="cs">长沙</li>
            csli.id = "cs"
            csli.innerText = "长沙"
            // 将子元素放入父元素中
            var cityUl = document.getElementById("city")
            cityUl.appendChild(csli) // 在父元素中追加子元素
        }
        
        function addCsBeforeSz(){
            // 创建新的元素
            var csli = document.createElement("li") // <li></li>
            // 设置子元素的属性和文本 <li id="cs">长沙</li>
            csli.id = "cs"
            csli.innerText = "长沙"
            // 将子元素放入父元素中
            var cityUl = document.getElementById("city")
            var szli = document.getElementById("sz")
            // cityUl.insertBefore(新元素, 参照元素)
            cityUl.insertBefore(csli, szli) // 在父元素中追加子元素
        }

        function repelaceSz(){
            // 创建新的元素
            var csli = document.createElement("li") // <li></li>
            // 设置子元素的属性和文本 <li id="cs">长沙</li>
            csli.id = "cs"
            csli.innerText = "长沙"
            // 将子元素放入父元素中
            var cityUl = document.getElementById("city")
            var szli = document.getElementById("sz")
            // cityUl.insertBefore(新元素, 参照元素)
            cityUl.replaceChild(csli, szli) // 在父元素中追加子元素
        }

        function removeSz(){
            var szli = document.getElementById("sz")
            szli.remove()
        }

        function clearCity(){
            var cityUl = document.getElementById("city")
            /* var fc = cityUl.firstChild
            while(fc != null){
                fc.remove()
                fc = cityUl.firstChild
            } */
            // cityUl.innerHTML = ""
            cityUl.remove()
        }
    </script>
</head>
<body>
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="sz">深圳</li>
        <li id="gz">广州</li>
    </ul>

    <hr>
    <!-- 在城市列表的最后添加一个子标签：<li>长沙</li> -->
    <button onclick="addCs()">增加长沙</button>

    <!-- 在城市列表深圳前增加一个子标签：<li>长沙</li> -->
    <button onclick="addCsBeforeSz()">在深圳前插入长沙</button>

    <!-- 将城市列表深圳替换为长沙：<li>长沙</li> -->
    <button onclick="repelaceSz()">将深圳替换为长沙</button>
    
    <!-- 将城市列表深圳删除 -->
    <button onclick="removeSz()">删除深圳</button>

    <!-- 清空城市列表 -->
    <button onclick="clearCity()">清空城市列表</button>
    
</body>
</html>